<template>
  <div class="list">
    <a-button type="primary" class="base-mb10" @click="openModal">+ {{ $t('self.systemAccount.tips11') }}</a-button>

    <!-- :label-col="{span: 5}"-->
    <a-form
        ref="searchFormRef"
        class="search-form base-mb15"
        :model="searchFormState"
        @finish="onSearchFinish"
    >
      <a-row :gutter="[10, 24]">
        <a-col>
          <a-form-item name="roleName" :label="$t('self.systemAccount.tips2')">
            <a-input v-model:value="searchFormState.roleName" placeholder=""></a-input>
          </a-form-item>
        </a-col>
        <a-col class="base-flex base-rows">
          <a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
          <a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
        </a-col>
      </a-row>
    </a-form>

    <s-table ref="stableRef" :api-obj="tableConfig.apiObj" api-method="POST" :columns="sourceColumn" row-key="id" :light-index="tableConfig.lightIndex" :is-row-selection="false" @selectionChange="tableSelectionChange" :is-show-tool="false">

      <template #bodyCell="{ column, record, index }">
        <!--帐户状态-->
        <template v-if="column.key === 'status'">
          <template v-if="record[column.key]">
            <sc-status-indicator type="success"></sc-status-indicator>
            {{ $t('self.systemAccount.tips6') }}
          </template>
          <template v-else>
            <sc-status-indicator type="warning"></sc-status-indicator>
            {{ $t('self.systemAccount.tips7') }}
          </template>
        </template>

        <template v-if="column.key === 'action'">
            <span>
              <a href="javascript:void(0)" @click="openModal(record, index)">{{ $t('self.systemAccount.tips8') }}</a>
              <a-divider type="vertical"/>
              <a href="javascript:void(0)" @click="openPermissionsModal(record, index)">{{ $t('self.systemAccount.tips9') }}</a>
              <a-divider type="vertical"/>
              <a-popconfirm
                  :title="$t('self.confirmDelete')"
                  :ok-text="$t('self.yesTxt')"
                  :cancel-text="$t('self.noTxt')"
                  @confirm="handleDelete(record, index)"
              >
                <a href="javascript:void(0)">{{ $t('self.delete') }}</a>
              </a-popconfirm>
            </span>
        </template>

      </template>
    </s-table>

    <editModal ref="modalRef" @ok="stableRef.refresh()" @close=""></editModal>
    <permissionsModal ref="permissionsModalRef"></permissionsModal>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ScStatusIndicator from '@/components/scMini/scStatusIndicator.vue'
import { mainStore } from '@/stores/mainStore'
import editModal from './edit_modal.vue'
import permissionsModal from './permissions_modal.vue'
import { message } from 'ant-design-vue'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const $T = proxy.$t
const route = useRoute()
const router = useRouter()
const useMainStore = mainStore()

const selectedKey = ref([])
const stableRef = ref(null)
const tableConfig = ref({
  apiObj: $API.backend.systemAccount.list,
  lightIndex: [] // 要高亮的行号
})
// 表格列
const sourceColumn = ref([])

onMounted(async () => {
  // 获取表格列
  resetDefaultOptionsByLang()
})

// 监听 lang 状态
watch(
    () => useMainStore.lang, // 切换语言包时
    (curr, old) => {
      // console.log('语言包', curr)
      // 获取表格列
      resetDefaultOptionsByLang()
    }
);

const resetDefaultOptionsByLang = () => {
  sourceColumn.value = [
    // {
    //   title: $T('self.systemAccount.tips1'),
    //   dataIndex: 'id',
    //   key: 'id',
    //   width: 60
    // },
    {
      title: $T('self.systemAccount.tips2'),
      dataIndex: 'roleName',
      key: 'roleName',
      // width: 110
    },
    {
      title: $T('self.systemAccount.tips3'),
      dataIndex: 'orgName',
      key: 'orgName'
    },
    {
      title: $T('self.systemAccount.tips4'),
      dataIndex: 'mark',
      key: 'mark'
    },
    {
      title: $T('self.systemAccount.tips5'),
      dataIndex: 'status',
      key: 'status'
    },
    { title: $T('self.actionButton'), key: 'action', ellipsis: true, fixed: 'right', width: 220 }
  ]
}

const tableSelectionChange = (rows, record) => {
  selectedKey.value = rows
  // console.log('表格选择项', rows, record)
}

// =========start search表单
const searchFormRef = ref(null)
const searchFormState = ref({
  roleName: ''
})

const onSearchFinish = (values) => {
  const params = $TOOL.array.cleanParams(values)
  stableRef.value.upData(params, 1)
  // stableRef.value.upData(values, 1)
  // console.log('searchFormState: ', searchFormState)
}
// 重置搜索表单
const resetSearchForm = () => {
  searchFormRef.value.resetFields()
}
// =========end search表单

const modalRef = ref(null)
const openModal = (record, index) => {
  if (index !== undefined) {
    // 编辑
    tableConfig.value.lightIndex = [index] // 仅高亮当前行
    nextTick(() => {
      modalRef.value.edit(record)
    })
  } else {
    // 新增
    modalRef.value.add()
  }
}

const permissionsModalRef = ref(null)
const openPermissionsModal = (record, index) => {
  // 编辑
  tableConfig.value.lightIndex = [index] // 仅高亮当前行
  nextTick(() => {
    permissionsModalRef.value.edit(record)
  })
}

const handleDelete = (record, index) => {
  $API.backend.systemAccount.delete.post({
    id: record.id
  }).then(() => {
    message.success($T('self.message.success'))
    stableRef.value.refresh()
  }).catch(err => {
    message.error(err.msg);
  })
}


</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  background: #ffffff;
  padding: 15px;

  .search-form {
    padding: 16px;
    background: rgb(247, 248, 250);

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }
}
</style>
